<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>animation-nav</title>
	<style>
		ul{padding:0;margin: 0;}
		.menu>li{float: left;background-image: -webkit-linear-gradient(top,#494b57,#2d2d37,#494b57);background-image: linear-gradient(top,#494b57,#2d2d37,#494b57);background-image: -moz-linear-gradient(top,#494b57,#2d2d37,#494b57);background-image: -ms-linear-gradient(top,#494b57,#2d2d37,#494b57);position: relative;}
		.menu ul li,.menu>li{list-style: none;}
		.menu>li>a,.menu ul a{display:block;text-decoration: none;color: #fff;font-weight: bold;font-family: arial;padding: 0 30px;text-shadow: 1px 2px 1px #000;line-height: 50px;}
		.menu>li>a{border-right: 1px solid #4d5059;border-left: 1px solid #000;}
		.menu>li:first-child >a,.menu>li:first-child{border-radius: 10px 0 0 10px;}
		.menu>li:last-child >a,.menu>li:last-child{border-radius: 0 10px 10px 0;}
		.menu>li:first-child a{border-left: none;}
		.menu>li:last-child a{border-right: none;}
		.menu>li a:hover{
			background-color: teal;
			animation: Myanimation 1s;
			-webkit-animation: Myanimation 1s;
		}
		@keyframes Myanimation
		{
			0% {background-color: #fff;}
			100%{background-color: teal;}
		}
		@-webkit-keyframes Myanimation
		{
			0% {background-color: #fff;}
			100%{background-color: teal;}
		}
		.menu ul{position: absolute;top: 50px; left: 0;opacity: 0;transition: opacity,1s;-webkit-transition: opacity,1s;-moz-transition: opacity,1s;-ms-transition: opacity,1s;}
		.menu ul a{background-color: #1f2024;width: 90px;}
		.menu li:hover .menu2{opacity: 1;}
		.menu2 li{height: 0;overflow:hidden;transition: height,.8s;-webkit-transition: height,.8s;-moz-transition: height,.8s;-ms-transition: height,.8s;}
		.menu li:hover .menu2 li{height: 50px;}
	</style>
</head>
<body>
	<ul class="menu">
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a>
			<ul class="menu2">
				<li><a href="#">My work</a></li>
				<li><a href="#">My favorite</a></li>
				<li><a href="#">My hoby</a></li>
			</ul>
		</li>
		<li><a href="#">Contact</a></li>
	</ul>
</body>
</html>